<template>
  <div>
  <!-- header部分 -->
    <nav-title title="待办事项" routerLink="index"/>
    <div class="nav-tabs">
      <div :class="type=='todo'?'chosed':''"  @click="switchTab('todo')">待审批</div>
      <div :class="type!='todo'?'chosed':''"  @click="switchTab('done')">已审批</div>
    </div>
    <div class="search">
      <input class="search-input" type="text" placeholder="请输入搜索关键字" v-model="searchText1">
      <img class="search-img" src="./images/search.png" alt="" @click="searchAct">
    </div>
    <ul v-if="type == 'todo'">
      <li v-for="(todoItem,index) in todoList" v-bind:key="index">
        <div class="neirong"  @click="goToApprove(todoItem.cWfStatus,todoItem.cWfType,todoItem.cTransactionNbr,todoItem.cValLogic,todoItem.cStepNbr)">
          <div class="yuan0" v-if=" index%4 == 0 "></div>
          <div class="yuan1" v-if=" index%4 == 1 "></div>
          <div class="yuan2" v-if=" index%4 == 2 "></div>
          <div class="yuan3" v-if=" index%4 == 3 "></div>

          <div class="con content-todo">{{todoItem.text254}}</div>
          <div class="clearfix timer">
            <div class="con fl time" style="height: 25px;">{{todoItem.createdttm|dateFormat2}}</div>
            <div class="operation fr">
              <img src="./images/arrow-right.png" alt="">
            </div>
          </div>

        </div>
      </li>
    </ul>
    <ul v-if="type == 'done'">
      <li v-for="(doneItem,index) in doneList">
        <div class="neirong" @click="goToCheck(doneItem.cWfType,doneItem.cTransactionNbr,doneItem.cStepNbr)">
          <div class="yuan0" v-if=" index%4 == 0 "></div>
          <div class="yuan1" v-if=" index%4 == 1 "></div>
          <div class="yuan2" v-if=" index%4 == 2 "></div>
          <div class="yuan3" v-if=" index%4 == 3 "></div>
          <div class="con content-todo clearfix">{{doneItem.text254}}</div>
          <div class="operation">
            <!-- 根据cwfstatus来判断，A:已批准  B:已驳回  C:已撤单  D；已拒绝  P:审批中 S: 已保存 -->
            <img v-if="doneItem.cWfStatus == 'A'" class="process-img" src="./images/process/01.png" alt="">
            <img v-if="doneItem.cWfStatus == 'B'" class="process-img" src="./images/process/02.png" alt="">
            <img v-if="doneItem.cWfStatus == 'C'" class="process-img" src="./images/process/03.png" alt="">
            <img v-if="doneItem.cWfStatus == 'D'" class="process-img" src="./images/process/04.png" alt="">
            <img v-if="doneItem.cWfStatus == 'P'" class="process-img" src="./images/process/05.png" alt="">
            <img v-if="doneItem.cWfStatus == 'S'" class="process-img" src="./images/process/06.png" alt="">
            <img v-if="doneItem.cWfStatus == 'T'" class="process-img" src="./images/process/07.png" alt="">
            <img v-if="doneItem.cWfStatus == 'AR'" class="process-img" src="./images/process/08.png" alt="">
          </div>
          <div class="clearfix timer">
            <div class="con time fl" style="height: 25px;">{{doneItem.cWfLastupddttm|dateFormat2}}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import vHeader from "../../components/header";
import { getTodoList, getDoneList } from "../../api/api";
import { json2Form } from "../../util/http";

export default {
  components: {
    vHeader
  },
  mounted() {
    this.type = this.$route.params.type == 'done' ?  'done' : 'todo';
    //代办事项列表，默认先查询待审批
    this.switchTab(this.type);
  },
  data() {
    return {
      type: 'todo',
      searchText1: "", //搜索待审批
      todoList: [],
      doneList: [] //待审批
    };
  },
  methods: {
    switchTab(type) {
      this.type = type;
      if(type == 'todo' && this.todoList.length == 0) {
        this.getTodoListInfo();
      } else if (type == 'done' && this.doneList.length == 0) {
        this.getDoneListInfo();
      } 
    },
    searchAct() {
      if(this.type == 'todo') {
        this.getTodoListInfo();
      } else {
        this.getDoneListInfo();
      }
    },
    getTodoListInfo() {
      let params = {
        queryKey: this.searchText1
      };
      getTodoList(params)
        .then(res => {
          if (res && res.retCode === "000000") {
            this.todoList = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    goToApprove(cWfStatus, cwfType, cTransactionNbr, cValLogic, cStepNbr) {
      ////B-已驳回,如果是移动端有发起功能的流程
      //cValLogic:此字段判断是否为申请人

        console.error(cwfType)
      if (cWfStatus == "B" && cwfType != "test" && cValLogic == "99") {
        if (cwfType == "OUT") {
          this.$router.push({
            name: "GoOut",
            query: {
              cTransactionNbr: cTransactionNbr
            }
          });
          return;
        }
        if (cwfType == "LAVE") {
          this.$router.push({
            name: "Vacation",
            query: {
              emplid: this.$store.state.eid,
              cTransactionNbr: cTransactionNbr
            }
          });
          return;
        }
        if (cwfType == "SEL") {
          this.$router.push({
            name: "Unvacation",
            query: {
              cTransactionNbr: cTransactionNbr
            }
          });
          return;
        }
        if (cwfType == "OVRT") {
          this.$router.push({
            name: "OverTime",
            query: {
              cTransactionNbr: cTransactionNbr
            }
          });
          return;
        }
        if (cwfType == "CRD") {
          this.$router.push({
            name: "SupplementaryCardDetail",
            query: {
              cTransactionNbr: cTransactionNbr
            }
          });
          return;
        }
      
        this.$vux.alert.show({
          title: "警告",
          content: "当前流程已被驳回，请至PC端待办事项中重新提交流程"
        });
      } else {
        //非上述情况，点击进入相应审批流程;
        // DMC:离职补偿金、HIR:招聘录用审批、LOF:解除劳动合同审批
        // PRC:转正审批、TER:离职审批、TOL:工作移交审批、DRFT：招聘录用审批
        // XFR:人员调动审批、CER：证明开具审批、MOD：个人信息修改审批
        if (cwfType == "DMC") {
          this.$router.push({
            name: "Compensate",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "HIR") {
          this.$router.push({
            name: "Employment",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "LOF") {
          this.$router.push({
            name: "Dissolution",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "PRC") {
          this.$router.push({
            name: "Formal",
            query: {
              cTransactionNbr: cTransactionNbr,
              stepNbr: cStepNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "TER") {
          this.$router.push({
            name: "Wastage",
            query: {
              cTransactionNbr: cTransactionNbr,
              stepNbr: cStepNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "TOL") {
          this.$router.push({
            name: "Handover",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "XFR") {
          this.$router.push({
            name: "Mobilization",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "MOD") {
          this.$router.push({
            name: "InfoModify",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "CER") {
          this.$router.push({
            name: "proveModify",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "DRFT") {
          this.$router.push({
            name: "Employment",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "REC") {
          this.$router.push({
            name: "recruit",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "SEL") {
          this.$router.push({
            name: "Unvacation",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "LAVE") {
          this.$router.push({
            name: "Vacation",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "PAY") {
          this.$router.push({
            name: "SalaryPayment",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "PHF") {
          this.$router.push({
            name: "ProvidentFund",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "ASA") {
          this.$router.push({
            name: "PayRaiseApproval",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "OUT") {
          this.$router.push({
            name: "GoOut",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "OVRT") {
          this.$router.push({
            name: "OverTime",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "CRD") {
          this.$router.push({
            name: "SupplementaryCardDetail",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0"
            }
          });
        } else if (cwfType == "EVA") {
          // 测评评估
          this.$router.push({
            name: "EvaluationList",
            query: {
              cTransactionNbr: cTransactionNbr,
              type: "evaluation"
            }
          });
        } else if (cwfType == "EPEV") {
          // 绩效评估
          this.$router.push({
            name: "EvaluationList",
            query: {
              cTransactionNbr: cTransactionNbr,
              type: "performanceAssess"
            }
          });
        } else if (cwfType == "EPPL") {
          // 绩效计划审批
          this.$router.push({
            name: "EvaluationList",
            query: {
              cTransactionNbr: cTransactionNbr,
              type: "performancePlan"
            }
          });
        } else if (cwfType == "EPRS") {
          // 绩效结果审批
          this.$router.push({
            name: "PerformanceRApproval",
            query: {
              cTransactionNbr: cTransactionNbr
            }
          });
        } else if (cwfType == "EPFR") {
          // 绩效面谈审批
          this.$router.push({
            name: "EvaluationList",
            query: {
              cTransactionNbr: cTransactionNbr,
              type: "performanceInterview",
              approved: "0",
            }
          });
        } else if (cwfType == "EPPR") {
          // 绩效计划填报
          this.$vux.alert.show({
            title: "提示",
            content: "绩效计划提报功能未开放，请至PC端待办事项中进行填写！"
          });
        } else if (cwfType == "CFT") {
          // 利益冲突申报
          this.$vux.alert.show({
            title: "提示",
            content: "利益冲突申报功能未开放，请至PC端待办事项中进行填写！"
          });
        } else if (cwfType == "APEL") {
          this.$router.push({
            name: "PerformanceAppeal",
            query: {
              cTransactionNbr: cTransactionNbr,
              approved: "0",
            }
          });
        } else if (cwfType == "EPFF") {
          // 绩效面谈
          this.$router.push({
            name: "PerformanceInterview",
            query: {
              cTransactionNbr: cTransactionNbr,
              from: 'todoList'
            }
          });
        }
      }
    },
    getDoneListInfo() {
      let params = {
        queryKey: this.searchText1
      };
      getDoneList(params)
        .then(res => {
          if (res && res.retCode === "000000") {
            this.doneList = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    goToCheck(cwfType, cTransactionNbr, cStepNbr) {
      //当流程类型判断
      if (cwfType == "DMC") {
        this.$router.push({
          name: "Compensate",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "HIR") {
        this.$router.push({
          name: "Employment",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "LOF") {
        this.$router.push({
          name: "Dissolution",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "PRC") {
        this.$router.push({
          name: "Formal",
          query: {
            cTransactionNbr: cTransactionNbr,
            stepNbr: cStepNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "TER") {
        this.$router.push({
          name: "Wastage",
          query: {
            cTransactionNbr: cTransactionNbr,
            stepNbr: cStepNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "TOL") {
        this.$router.push({
          name: "Handover",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "CER") {
        this.$router.push({
          name: "proveModify",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "XFR") {
        this.$router.push({
          name: "Mobilization",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "MOD") {
        this.$router.push({
          name: "InfoModify",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "DRFT") {
        this.$router.push({
          name: "Employment",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "REC") {
        this.$router.push({
          name: "recruit",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "SEL") {
        this.$router.push({
          name: "Unvacation",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "LAVE") {
        this.$router.push({
          name: "Vacation",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "PAY") {
        this.$router.push({
          name: "SalaryPayment",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "PHF") {
        this.$router.push({
          name: "ProvidentFund",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "ASA") {
        this.$router.push({
          name: "PayRaiseApproval",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "OUT") {
        this.$router.push({
          name: "GoOut",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "OVRT") {
        this.$router.push({
          name: "OverTime",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "CRD") {
        this.$router.push({
          name: "SupplementaryCardDetail",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1"
          }
        });
      } else if (cwfType == "EVA") {
        // 测评评估
        this.$router.push({
          name: "EvaluationList",
          query: {
            cTransactionNbr: cTransactionNbr,
            type: "evaluation"
          }
        });
      } else if (cwfType == "EPEV") {
        // 绩效评估
        this.$router.push({
          name: "EvaluationList",
          query: {
            cTransactionNbr: cTransactionNbr,
            type: "performanceAssess"
          }
        });
      } else if (cwfType == "EPPL") {
        // 绩效计划审批
        this.$router.push({
          name: "EvaluationList",
          query: {
            cTransactionNbr: cTransactionNbr,
            type: "performancePlan"
          }
        });
      } else if (cwfType == "EPRS") {
        // 绩效结果审批
        this.$router.push({
          name: "PerformanceRApproval",
          query: {
            cTransactionNbr: cTransactionNbr,
            type: "done"
          }
        });
      } else if (cwfType == "EPFR") {
        // 绩效面谈审批
        this.$router.push({
          name: "EvaluationList",
          query: {
            cTransactionNbr: cTransactionNbr,
            type: "performanceInterview",
            approved: "1",
          }
        });
      } else if (cwfType == "CFT") {
        // 利益冲突申报
        this.$vux.alert.show({
          title: "提示",
          content: "利益冲突申报功能未开放，请至PC端待办事项中进行填写！"
        });
      } else if (cwfType == "APEL") {
        this.$router.push({
          name: "PerformanceAppeal",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "1",
          }
        });
      }
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.search {
  position: relative;
  .search-input {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 90%;
    margin: 8px 0;
    padding-left: 5px;
    text-align: left;
    border-radius: 3px;
    border: 2px solid #f5f5f5 !important;
  }
  .search-img {
    position: absolute;
    top: 11px;
    right: 5%;
    margin-right: 10px;
  }
}

.nav-tabs{
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  border-bottom: 1px solid #ccc;
  >div{
    width: 30%;
    margin: 0 10% 0 10%;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    float: left;
    &.chosed{
      border-bottom: 2px solid #16a8e7;
      color: #16a8e7;
    }
  }
}

ul li:first-child {
  margin-top: -26px;
}
ul li:last-child {
  margin-bottom: 22px;
}
ul {
  margin-top: 20px;
  margin-left: 10px;
  clear: both;
  height: auto;
  overflow: hidden;
  background: url(../userInfo/image/rongyu_bg.jpg) 15px 50px repeat-y;
  .timer {
    margin-top: 22px;
    .time {
      font-size: 13px;
      color: #9b9b9b;
    }
  }
  li {
    clear: both;
    height: 100%;
    padding-top: 22px;
    cursor: default;
    .neirong {
      position: relative;
      .operation {
        position: absolute;
        top: 50%;
        right: 20px;
        // margin-top: 9px;
        .process-img{
          width: 60px;
          height:54px;
        }
      }
    }
  }
  .con {
    text-align: left;
    margin-left: 24px;
    line-height: 25px;
  }
  .content-todo {
    width: 80%;
    color: #333;
    font-size: 14px;
    font-weight: 700;
  }
  .yuan0 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #07bc4b;
  }
  .yuan1 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16a8e7;
  }
  .yuan2 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6633;
  }
  .yuan3 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffff00;
  }
}
</style>
